<template>
  <PageContainer :title="(route.meta.title as string)">
    <a-card>
      <a-space>
        <a-button type="primary" @click="showModal">
          点击确定异步关闭
        </a-button>
        <a-button type="primary" @click="handleModal">
          useModal组件方式
        </a-button>
      </a-space>
    </a-card>

    <ProModal
      v-model:open="open"
      title="Title"
      :mask-closable="false"
      :closable="true"
      :width="520"
      :min-height="192"
      :fullscreen="true"
      :forceFullscreen="false"
      :drag="true"
      :borderDraw="true"
      :centered="false"
      :center-y="false"
      :destroyOnClose="false"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @Cancel="handleCancel"
      @rect="handleRect"
    >
      <!-- <template #title> Modal title </template> -->
      <!-- <template #footer> Modal footer </template> -->
      <!-- <template #okText> Modal okText </template> -->
      <template #cancelText> Modal cancelText {{ timeCount }} </template>
      <!-- <template #closeIcon><ExclamationCircleOutlined /></template> -->

      <div>
        ① 窗口可以拖动；<br />
        ② 窗口可以全屏、关闭；<br />
        ③ 窗口可以通过八个方向拉伸改变大小；<br />
        ④ 限制窗口最小宽度/高度。
      </div>
      <p>{{ modalText }}</p>
      <p>{{ timeCount }}</p>
      <!-- <p v-for="i in 30">{{ i }}</p> -->
    </ProModal>
  </PageContainer>
</template>

<script setup lang="ts">
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { PageContainer } from "antdv-pro-layout";
import { ProModal, useModal } from "antdv-pro-modal";
import { useRoute } from "vue-router";
import { createVNode, ref, onMounted } from "vue";

const route = useRoute();
const open = ref<boolean>(false);
const confirmLoading = ref<boolean>(false);
const modalText = ref<string>("模态窗口内容信息");

const showModal = () => {
  open.value = !open.value;
};

const handleOk = () => {
  const originText = modalText.value;
  modalText.value = "将在2s后关闭模态窗口";
  confirmLoading.value = true;
  setTimeout(() => {
    open.value = false;
    confirmLoading.value = false;
    modalText.value = originText;
  }, 2000);
};

const handleCancel = (e: any) => {
  console.log("handleCancel", e);
};

const handleRect = (e: any) => {
  console.log("handleRect", e);
};

const modal = useModal();
const handleModal = () => {
  modal.open({
    drag: true,
    borderDraw: true,
    closable: false,
    destroyOnClose: false,
    icon: createVNode(ExclamationCircleOutlined, {
      style: "color:#faad14;",
    }),
    title: "Example Modal",
    content: createVNode("div", { style: "color:red;" }, "Some descriptions"), //"This is an example modal content",
    okText: "Yes",
    okType: "danger",
    okButtonProps: {
      type: "dashed",
    },
    cancelText: "No",
    onOk: (e) => {
      console.log("Confirmed", e);
    },
    onCancel: (e) => {
      console.log("Cancelled", e);
    },
  });
};

let timeCount = ref<number>(0);
onMounted(() => {
  setInterval(() => timeCount.value++, 1000);
});
</script>

<style scoped></style>
